<template>
  <view class="content">
    <view class="login-card flexc">
      <image
        class="pager flex-1"
        src="@/subpages/static/login1.png"
        mode="heightFix"
      ></image>
      <view class="primary-button" @click="loginbyphone"> 手机号安全登录 </view>
      <button
        v-if="agree"
        class="primary-button-stroke"
        plain
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhoneNumber"
      >
        微信一键登录
      </button>
      <button
        v-else
        class="primary-button-stroke"
        plain
        @click="onGetPhoneNumber"
      >
        微信一键登录
      </button>
    </view>
    <view class="login-privacy-container flexc">
      <view class="flexr align-center justify-center">
        <radio-group @change="onAgreeChange">
          <radio value="agree" :checked="agree"></radio>
        </radio-group>
        <view>
          <text>我已阅读并同意</text>
          <text class="link" @click="goPrivacy">《服务条款》</text>
          <text>和</text>
          <text class="link" @click="goPrivacy">《隐私条款》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/user.js';
const userStore = useUserStore();
const agree = ref(false);
const url = ref('');
onLoad((options) => {
  url.value = options.url;
});
function onAgreeChange(e) {
  // console.log(e);
  agree.value = e.detail.value === 'agree';
}
function loginbyphone() {
  uni.navigateTo({
    url:
      '/subpages/account/loginbyphone' + (url.value ? `?url=${url.value}` : ''),
  });
}
function goPrivacy() {
  uni.navigateTo({
    url: '/subpages/account/privacy',
  });
}
async function onGetPhoneNumber(e) {
  if (!agree.value) {
    uni.showToast({
      title: '请先同意隐私服务条款',
      icon: 'none',
    });
    return;
  }
  if (!e.detail.code) {
    uni.showToast({
      title: '用户拒绝',
      icon: 'none',
    });
    return;
  }
  const { encryptedData, code: phoneCode, iv, errno, errMsg } = e.detail;

  if (errno) {
    uni.showModal({
      content: errMsg,
      title: '提示',
    });
    return;
  }
  uni.showLoading({
    title: '登录中',
  });
  const loginSuccess = await userStore.login(phoneCode);
  if (loginSuccess) {
    uni.showToast({
      title: '登录成功',
      icon: 'success',
    });
    if (url.value) {
      if (url.value.startsWith('/pages')) {
        uni.reLaunch({
          url: url.value,
        });
      } else {
        uni.redirectTo({
          url: url.value,
        });
      }
    } else {
      uni.navigateBack();
    }
  } else {
    if (userStore.needRegister) {
      userStore.needRegister = false;
      uni.redirectTo({
        url:
          '/subpages/account/register' + (url.value ? `?url=${url.value}` : ''),
      });
      return;
    }
    uni.showToast({
      title: '登录失败',
      icon: 'error',
    });
  }
}
</script>

<style lang="scss">
.content {
  padding: 32rpx;
  .login-card {
    background-color: white;
    border-radius: 12rpx;
    flex: 2;
    padding: 40rpx;
    .pager {
      align-self: center;
    }
    .primary-button {
      margin-top: 40rpx;
    }
    .primary-button-stroke {
      margin-top: 40rpx;
      width: 100%;
    }
  }
  .login-privacy-container {
    flex: 1;
    justify-content: flex-end;
    padding-bottom: 20rpx;
    .link {
      color: $primary-color;
      padding: 10rpx 0;
    }
  }
}
</style>
